<template>
    <div class="font-size-30 height-100 width-100 flex flex-direction-column">
        
        <zt-table-page  :searchColumns="searchFormData" :showLoading="loading"
            :tableColumns="columnsData" :tableData="tableData" :currentPage="pagination.page" :pageSize="pagination.limit"
            :total="pagination.total" @page-change="handerPageChange" :moreOperations="operationsConfig"
            @search-change="handerSearch" @refresh="getAccountList">
            <template #topRight>
                <el-row class="mb-4" v-auth="'accountManage_create'">
                    <el-button type="primary" :icon="Plus" @click="handerDictionaryDialog">新增账号</el-button>
                </el-row>
            </template>

            <template #userType="{ row }">
                <el-tag class="ml-2" type="success" v-if="row.userType == -1">超级管理员</el-tag>
                <el-tag class="ml-2" type="primary" v-if="row.userType == 0">普通用户</el-tag>
            </template>
            <template #sex="{ row }">
                <el-tag v-if="row.sex == 1">男</el-tag>
                <el-tag v-else-if="row.sex == 0" type="success">女</el-tag>
                <el-tag v-else type="danger">未知</el-tag>
            </template>
            <template #activated="{ row }">
                <el-tag class="ml-2" type="success" v-if="row.activated">激活</el-tag>
                <el-tag class="ml-2" type="danger" v-if="!row.activated">禁用</el-tag>
            </template>
            <template #moreColumn="{ row, index }">
                <el-button size="small" @click.stop="handleDetail(row)" v-auth="'accountManage_detail'">详情</el-button>
                <el-button size="small" type="primary" v-auth="'accountManage_modify'"
                    @click.stop="handleEdit(row)">修改</el-button>
                <el-button size="small" v-auth="'accountManage_delete'" type="danger"
                    @click.stop="handleDelete(row)">删除</el-button>

                <el-popover placement="top" :width="250">
                    <template #reference>
                        <el-button type="success" size="small" style="margin-right: 16px">更多操作</el-button>
                    </template>
                    <div style="display: flex;align-items: center;justify-content: center;">
                        <el-button size="small" type="success" v-auth="'accountManage_activation'" v-if="!row.activated"
                            @click="handleChange(row)">激
                            活</el-button>
                        <el-button type="warning" size="small" v-auth="'accountManage_disable'" v-if="row.activated"
                            @click="handleChange(row)">禁
                            用</el-button>
                        <el-button size="small" v-auth="'accountManage_role_assignment'" type="primary"
                            @click.stop="handleRole(row)">角色分配</el-button>
                        <el-button size="small" type="info" v-auth="'accountManage_reset_password'"
                            @click.stop="handleResetPassword(row)">重置密码</el-button>
                    </div>
                </el-popover>

            </template>
        </zt-table-page>
        <add-account-dialog v-model="showVisible" v-if="showVisible" :objectValue="objectValue" @success="getInitPage"
            :currentType="currentType" />

        <role-assignment-dialog v-model="isRoleVisible" v-if="isRoleVisible" :objectValue="objectValue" />
        <details-assignment-dialog v-model="isDetailsVisible" v-if="isDetailsVisible" :objectValue="objectValue" />
    </div>
</template>

<script setup name="AccountManage">
import {
    Plus,
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import addAccountDialog from "./components/add-account-dialog.vue"
import roleAssignmentDialog from "./components/role-assignment-dialog.vue"
import detailsAssignmentDialog from "./components/details-account-dialog.vue"
import { apiGetAccountList, apiPutDisableUser, apiPutActiveUser, apiDeleteUser, apiPutResetPassword } from "@/api/admin/systemSettings/accountManage/api.js"
import { columnsData, searchFormData } from "./configData.js"
const router = useRouter();
// 表格分页信息
const pagination = ref({
    page: 1,
    limit: 20,
    total: 0
})
// 更多列配置信息
const operationsConfig = {
    title: '操作', //标题
    align: 'center',//居中方式
    width: '300px',//宽度
    fixed: 'right',//固定定位方向
}
const formData = ref({})
const tableData = ref([])
// 加载状态
const loading = ref(false)

// 分页改变事件
async function handerPageChange(e) {
    pagination.value.page = e.currentPage
    pagination.value.limit = e.pageSize
    getAccountList()
}

// 初始值分页方法
async function getInitPage() {
    pagination.value.page = 1
    getAccountList()
}


// 搜索按钮点击事件
async function handerSearch(data) {
    pagination.value.page = 1
    formData.value = data
    getAccountList()
}

const currentType = ref('add') //当前操作类型
const showVisible = ref(false)
const objectValue = ref({})

// 新增用户
function handerDictionaryDialog() {
    currentType.value = 'add';
    showVisible.value = true
}
//修改用户
function handleEdit(row) {
    currentType.value = 'edit';
    showVisible.value = true
    objectValue.value = row
}
const isDetailsVisible = ref(false)
// 查看详情
function handleDetail(row) {
    isDetailsVisible.value = true
    objectValue.value = row
}


const isRoleVisible = ref(false) //控制角色分配弹窗
// 角色分配方法
function handleRole(row) {
    isRoleVisible.value = true
    objectValue.value = row
}


// 删除用户
async function handleDelete(row) {
    ElMessageBox.confirm('你是否确认删除该用户')
        .then(() => {
            apiDeleteUser({ ids: row.userId }, '删除中').then(res => {
                if (res.success) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    getAccountList()
                    return false
                }
                ElMessage({
                    message: res.message,
                    type: 'warning',
                })
            })
        })
}

// 激活、禁用
function handleChange(row) {
    ElMessageBox.confirm(`你是否确认${!row.activated ? '激活' : '禁用'}该用户`)
        .then(() => {
            if (!row.activated) {
                handleActiveUser(row)
            } else {
                handleDisabledUser(row)
            }
        })
}


// 激活用户
async function handleActiveUser(row) {
    apiPutActiveUser({ ids: row.userId }, '用户激活中').then(res => {
        if (res.success) {
            ElMessage({
                message: '用户激活成功',
                type: 'success',
            })
            getInitPage()
            return false
        }
        ElMessage({
            message: res.message,
            type: 'warning',
        })
    })
}

// 禁用用户
async function handleDisabledUser(row) {
    apiPutDisableUser({ ids: row.userId }, '用户禁用中').then(res => {
        if (res.success) {
            ElMessage({
                message: '用户禁用成功',
                type: 'success',
            })
            getInitPage()
            return false
        }
        ElMessage({
            message: res.message,
            type: 'warning',
        })
    })
}

// 重置密码
async function handleResetPassword(row) {
    ElMessageBox.confirm('你是否确认重置该用户密码')
        .then(() => {
            apiPutResetPassword({ ids: row.userId }, '重置密码中').then(res => {
                if (res.success) {
                    ElMessage({
                        message: '重置密码成功',
                        type: 'success',
                    })
                    getInitPage()
                    return false
                }
                ElMessage({
                    message: res.message,
                    type: 'warning',
                })
            })
        })
}


// 获取账户列表
async function getAccountList() {
    loading.value = true
    apiGetAccountList({
        page: pagination.value.page,
        limit: pagination.value.limit,
        ...formData.value
    }).then(res => {
        tableData.value = res.data.records
        pagination.value.page = res.data.current
        pagination.value.total = res.data.total
    }).finally(() => {
        loading.value = false
    })
}


onMounted(() => {
    getAccountList()
})

</script>

<style lang='scss' scoped></style>